<template>
  <div class="my-designer-lib">
    <div class="my-designer-lib-header">
      <div>全部组件</div>
    </div>
    <div class="my-designer-lib-body">
      <div class="type-list">
        <div class="type-item" v-for="(libType,index) in libTypes" :key="index"
             @click="handleLibItemClick(index,libType)"
             :class="[index == libIndex ? 'lib-is-active' : '']">
          <i class="iconfont" :class="libType.icon"></i>
          <p class="name">{{ libType.name }}</p>
        </div>
      </div>
      <div class="type-list-collapse" @dragover="dragOver">
        <el-collapse class="type-list-collapse-wrap" v-for="lib in libs" :key="lib.name"
                     v-model="defaultExpandedNames">
          <el-collapse-item :title="lib.name" :name="lib.name">
            <div :title="item.name" class="components-item" v-for="item in lib.data" :key="item.name"
                 :draggable="item.used"
                 @dragstart="dragStart($event, item.name)"
                 @click="toAddCom(item.name, item.used)">
              <div class="components-item-text">{{ item.alias }}</div>
              <div class="components-item-img"
                   :style="{backgroundImage: `url('${baseUrl}lib-png/${item.img}')`}"></div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!--        <n-collapse class="type-list-collapse-wrap" v-for="lib in libs" :key="lib.name"-->
        <!--                    :default-expanded-names="defaultExpandedNames">-->
        <!--          <n-collapse-item :title="lib.name" :name="lib.name">-->
        <!--            <div :title="item.name" class="components-item" v-for="item in lib.data" :key="item.name"-->
        <!--                 :draggable="item.used"-->
        <!--                 @dragstart="dragStart($event, item.name)"-->
        <!--                 @click="toAddCom(item.name, item.used)">-->
        <!--              <div class="components-item-text">{{ item.alias }}</div>-->
        <!--              <div class="components-item-img"-->
        <!--                   :style="{backgroundImage: `url('${baseUrl}lib-png/${item.img}')`}"></div>-->
        <!--            </div>-->
        <!--          </n-collapse-item>-->
        <!--        </n-collapse>-->
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
// import { NCollapse, NCollapseItem } from "naive-ui";
import { createComponent } from "../../../components/lib";
import { useStore } from "vuex";
import { baseUrl } from "../../../utils/constant";
import { libDetailList, libTypeList } from "./lib";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "design-lib",
  // components: {
  //   NCollapse,
  //   NCollapseItem
  // },
  setup() {
    const store = useStore();
    const libIndex = ref(0);
    const libTypes = ref([]);
    const libs = ref([]);
    const defaultExpandedNames = ref([]);
    const handleLibItemClick = (value, row) => {
      libIndex.value = value;
      getLibsList(row.type);
    };
    const getLibTypeList = () => {
      libTypes.value = libTypeList();
      getLibsList(libTypes.value[0].type);
    };
    const getLibsList = (type) => {
      libs.value = libDetailList(type);
      defaultExpandedNames.value = [libs.value[0].name];
    };
    const dragStart = (e, comName) => {
      e.dataTransfer.setData("text", comName);
    };
    const dragOver = (ev) => {
      ev.preventDefault();
      ev.stopPropagation();
      ev.dataTransfer.dropEffect = "none";
    };
    const pageConfig = computed(() => store.state.design.pageConfig);
    const toAddCom = async (comName, used) => {
      if (used) {
        const com = createComponent(comName);
        com.attr.x = Math.floor((pageConfig.value.width - com.attr.w) / 2);
        com.attr.y = Math.floor((pageConfig.value.height - com.attr.h) / 2);
        await store.dispatch("design/addCom", com);
        store.commit("design/selectComp", com.id);
        // if (com.apis.source) {
        //   await com.loadData();
        //   // todo 数据加载
        //   // BlueprintModule.datavComponents[com.id].$DATAV_requestData()
        // }
      } else {
        ElMessage({
          type: "success",
          message: "正在开发中..."
        });
      }
    };
    onMounted(() => {
      getLibTypeList();
    });
    return {
      libIndex,
      libTypes,
      libs,
      baseUrl: baseUrl,
      handleLibItemClick,
      getLibTypeList,
      getLibsList,
      dragStart,
      dragOver,
      toAddCom,
      defaultExpandedNames
    };
  }
});
</script>
<style scoped lang="less">
@import "./../../../style/page/design.less";
</style>
